<template>
	<view>
		<!-- 轮播1-->
		<view class="" v-for="(item, index) in list" :key="index">
			<video :id="myVideo+index" objectFit="cover" :src='item.image' :controls='true'
				v-if="item.image.substring(item.image.lastIndexOf('.')+1)=='mp4'" class="video">
			</video>
			<view class="banner-swiper-wrap u-m-b-10" :style="{ padding: `${Py}rpx ${Px}rpx` }" v-else>
				<swiper :style="{ minHeight: height + 'rpx', height: height + 'rpx' }" class="screen-swiper square-dot"
					:indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500">
					<swiper-item :style="{ borderRadius: borderRadius + 'rpx' }" @tap="onSwiper(index)">
						<!-- <video v-if="item.image.substring(item.image.lastIndexOf('.')+1)=='mp4'" id="myVideo"
						objectFit="cover" :src='item.image' :controls='true'>
					</video> -->
						<image :src="item.image" mode="aspectFill"
							v-if="item.image.substring(item.image.lastIndexOf('.')+1)!=='mp4'"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * shBanner-轮播卡片
	 * @property {Array} list 轮播图数据，
	 * @property {String Number} height 轮播图组件高度，单位rpx（默认250）
	 * @property {String} borderRadius 圆角值
	 * @event {Function} click 点击轮播图时触发
	 */
	export default {
		components: {},
		data() {
			return {
				bofangBtnState: false
			};
		},
		props: {
			Px: {
				type: [Number, String],
				default: 0
			},
			Py: {
				type: [Number, String],
				default: 0
			},
			// 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			// 圆角值
			borderRadius: {
				type: [Number, String],
				default: 0
			},
			// list的高度，单位rpx
			height: {
				type: [Number, String],
				default: 250
			}
		},
		computed: {},
		methods: {
			onSwiper(e) {
				this.$tools.routerTo(this.list[e].path);
			},
		}
	};
</script>

<style lang="scss" scoped>
	.video {
		width: 100%;
	}
</style>
